<script setup>
import { GetCancelOrderAPI, GetOrderByidAPI, GetOrderPayAPI } from '@/apis/order';
import { GetUserInfoAPI } from '@/apis/user';
import router from '@/router';
import { usePayStore, useUserStore } from '@/stores';
import { currentTime } from '@/utils/dayjs';
import { ElMessage } from 'element-plus';

const payFn = async () => {

  const sumitData = {
    id: formDataById.value.orderId,
    pay_time: currentTime(),
    pay_money: formDataById.value.payMoney
  }
  try {
    await GetOrderPayAPI(sumitData)
    ElMessage.success('支付成功')

    const result = await GetUserInfoAPI()
    useUserStore().userInfo.money = result.money
    usePayStore().createOrder.order_money = ''
    usePayStore().orderId = ''

    router.push('/')
  } catch (error) {
    ElMessage.error('支付失败')
  }
}

const isShow = ref(false)
const cancelFn = async () => {
  isShow.value = true
}

const ruleFormRef = ref()
const FormData = ref({
  text: ''
})
const rule = {
  text: [
    { required: true, message: "不能为空", trigger: 'blur' }
  ]
}

const cancelResult = async () => {
  await ruleFormRef.value.validate()

  const submit = {
    id: formDataById.value.orderId,
    message: FormData.value.text
  }
  try {
    await GetCancelOrderAPI(submit)
    ElMessage.success('取消成功')
    router.push('/')
  }catch (error){
    ElMessage.success('取消失败')
  }finally {
    isShow.value = false
  }
}

const formDataById = ref({
  buyNumber: 1
})
const getOrderData = async () => {
  const result = await GetOrderByidAPI(usePayStore().orderId)
  formDataById.value = result
  console.log(formDataById.value);
  
}

const loading = ref(true)
onMounted(async() => {
  await getOrderData()
  loading.value = false
})
</script>

<template>
  <el-card
    v-loading="loading"
    element-loading-text="加载中..."
  >
    <el-descriptions
      title="订单支付页面"
      :extra="'订单号: ' + formDataById?.orderId"
      direction="vertical"
      :column="6"
      border
    >
    <el-descriptions-item
      :rowspan="1"
      :width="140"
      label="图片"
      align="center"
    >
      <el-image
        style="width: 100px; height: 100px"
        :src="formDataById?.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
      />
    </el-descriptions-item>
    <el-descriptions-item label-align="center" align="center" label="书名" class-name="text">{{ formDataById?.bookName }}</el-descriptions-item>
    <el-descriptions-item label-align="center" align="center"  label="作者">
      {{ formDataById?.author }}
    </el-descriptions-item>
    <el-descriptions-item label-align="center" align="center" label="价格" > {{ formDataById?.bookMoney }} </el-descriptions-item>

    <el-descriptions-item label-align="center" align="center" label="数量">
      <el-input-number :disabled="true" v-model="formDataById.buyNumber" :min="1" :max="10" @change="handleChange" />
    </el-descriptions-item>
    <el-descriptions-item label-align="center" align="center" label="支付金额">
      {{ formDataById?.payMoney || '数据加载中' }}
    </el-descriptions-item>
  </el-descriptions>
  <div class="item">
    <div class="title">收货姓名</div>
    <div class="name">{{ formDataById?.user || '数据加载中' }}</div>
  </div>
  <div class="item">
    <div class="title">联系方式</div>
    <div class="name">{{ formDataById?.phone || '数据加载中' }}</div>
  </div>
  <div class="item">
    <div class="title">收货地址</div>
    <div class="name">{{ formDataById?.address || '数据加载中'}}</div>
  </div>
  <div class="submit">
    <div class="cancel" @click="cancelFn">取消订单</div>
    <div class="payOrder" @click="payFn">立即支付</div>
  </div>
  </el-card>

  <!-- 取消订单弹出层 -->
  <el-dialog v-model="isShow" :show-close="true" width="500" center>
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">确认取消订单吗?</h4>
      </div>
    </template>
    <template #footer>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="FormData"
        :rules="rule"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
      <el-form-item label="取消原因" prop="text">
        <el-input
          v-model="FormData.text"
          maxlength="10"
          placeholder="请输入取消原因"
          show-word-limit
          type="text"
        />
      </el-form-item>
      <el-button style="width: 150px;" @click="cancelResult">确认</el-button>
      </el-form>
    </template>
  </el-dialog>
</template>


<style lang="scss" scoped>
.pay {
  cursor: pointer !important;
}
.pay:hover {
  color: skyblue;
}
.addressTitle {
  display: flex;
}

.item,.submit {
  height: 37px;
  line-height: 37px;
  text-align: center;
  // border: 1px solid #dcdfe6;
  border: 1px solid #dcdfe6;
  margin-top: -1px;
}

.item {
  display: flex;
}
.item .title {
  width: 100px;
  border-right: 1px solid #dcdfe6;
}
.item .name {
  padding-left: 10px;
}

.submit {
  display: flex;
  cursor: pointer;
}
.submit .cancel,.payOrder {
  flex: 1;
  border: 1px solid #dcdfe6;
}
.payOrder:hover {
  color: #41b883;
  border-color: #41b883;
}
.cancel:hover {
  color: red;
  border-color: red;
}
</style>